<template>
  <div class="task-layout">
    <!-- 回到主页按钮 -->
    <el-button
        type="primary"
        icon="el-icon-arrow-left"
        @click="goHome"
        style="margin-bottom: 20px; display: block;"
    >
      回到主页
    </el-button>

    <el-row gutter="20">
      <!-- 任务点列表（左侧） -->
      <el-col :span="6">
        <div>
          <h2 class="section-title">任务点列表</h2>
          <div v-if="tasks.length > 0">
            <el-card
                v-for="task in tasks"
                :key="task.id"
                class="task-card"
                @click="enterLearningPage(task)"
                shadow="hover"
                :body-style="{ padding: '16px' }"
            >
              <div class="task-header">
                <!-- 任务状态 -->
                <span :class="task.status === '已完成' ? 'task-status-completed' : 'task-status-incomplete'">
                  {{ task.status }}
                </span>
                <strong class="task-title">{{ task.title }}</strong>
                <!-- 显示任务类型 -->
                <div class="task-type">
                  <el-tag
                      v-if="task.documentUrl && task.documentUrl.endsWith('.mp4')"
                      type="success"
                      class="task-type-tag"
                      effect="dark"
                  >视频</el-tag>
                  <el-tag
                      v-else-if="task.documentUrl && task.documentUrl.endsWith('.pdf')"
                      type="info"
                      class="task-type-tag"
                      effect="dark"
                  >文档</el-tag>
                  <el-tag
                      v-else-if="task.documentUrl && (task.documentUrl.endsWith('.jpg') || task.documentUrl.endsWith('.png') || task.documentUrl.endsWith('.jpeg'))"
                      type="warning"
                      class="task-type-tag"
                      effect="dark"
                  >图片</el-tag>
                  <el-tag
                      v-else
                      type="default"
                      class="task-type-tag"
                      effect="dark"
                  >其他</el-tag>
                </div>
              </div>
              <div class="task-description">{{ task.content }}</div>
            </el-card>
          </div>
          <div v-else>
            <p class="no-tasks">暂无任务点</p>
          </div>

          <!-- 进入考试按钮 -->
          <el-button
              v-if="tasks.length > 0"
              type="primary"
              @click="enterExamPage"
              style="margin-top: 20px; width: 100%"
              :disabled="!isAllTasksCompleted"
          >
            进入考试
          </el-button>
        </div>
      </el-col>

      <!-- 学习内容展示（右侧） -->
      <el-col :span="18">
        <div v-if="taskToLearn" class="learning-content">
          <h2 class="section-title">学习任务点</h2>
          <el-card v-if="taskToLearn" class="task-card">
            <div class="task-header">
              <div><strong>任务点名称:</strong> {{ taskToLearn.title }}</div>
              <div class="task-actions">
                <el-button
                    v-if="taskToLearn.documentUrl && taskToLearn.documentUrl.endsWith('.mp4')"
                    type="primary"
                    icon="el-icon-video-camera"
                    size="small"
                    @click="playVideo(taskToLearn.documentUrl)"
                >下载视频</el-button>
                <el-button
                    v-else-if="taskToLearn.documentUrl && taskToLearn.documentUrl.endsWith('.pdf')"
                    type="info"
                    icon="el-icon-document"
                    size="small"
                    @click="viewDocument(taskToLearn.documentUrl)"
                >下载文档</el-button>
                <el-button
                    v-else-if="taskToLearn.documentUrl && (taskToLearn.documentUrl.endsWith('.jpg') || taskToLearn.documentUrl.endsWith('.png') || taskToLearn.documentUrl.endsWith('.jpeg'))"
                    type="warning"
                    icon="el-icon-picture"
                    size="small"
                    @click="viewImage(taskToLearn.documentUrl)"
                >下载图片</el-button>
              </div>
            </div>

            <div><strong>描述:</strong> {{ taskToLearn.content }}</div>

            <!-- 视频类型 -->
            <div v-if="taskToLearn.documentUrl && taskToLearn.documentUrl.endsWith('.mp4')">
              <video v-if="taskToLearn.documentUrl" controls :src="taskToLearn.documentUrl" class="media" @ended="onTaskCompleted('视频')"></video>
            </div>

            <!-- 文档类型 -->
            <div v-if="taskToLearn.documentUrl && taskToLearn.documentUrl.endsWith('.pdf')">
              <iframe v-if="taskToLearn.documentUrl" :src="taskToLearn.documentUrl" class="media" @load="onTaskCompleted('文档')"></iframe>
            </div>

            <!-- 图片类型 -->
            <div v-if="taskToLearn.documentUrl && (taskToLearn.documentUrl.endsWith('.jpg') || taskToLearn.documentUrl.endsWith('.png') || taskToLearn.documentUrl.endsWith('.jpeg'))">
              <img v-if="taskToLearn.documentUrl" :src="taskToLearn.documentUrl" class="media" alt="任务图片" @load="onTaskCompleted('图片')"/>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from '@/utiles/axios';
import { useRoute, useRouter } from 'vue-router';

const tasks = ref([]);  // 存储任务点列表
const taskToLearn = ref(null);  // 存储当前学习任务点
const route = useRoute();  // 获取路由参数
const router = useRouter();  // 用于跳转路由
const trainingPlanId = route.params.id;  // 获取URL中的培训计划ID

// 获取培训计划下的所有任务点
const getTasks = async () => {
  try {
    const response = await axios.get(`/trainingPlan/${trainingPlanId}/tasks`);
    tasks.value = response.data;
    if (tasks.value.length > 0) {
      taskToLearn.value = tasks.value[0];  // 默认加载第一个任务点
    }
  } catch (error) {
    console.error('获取任务点失败', error);
  }
};

// 检查是否所有任务点都完成
const isAllTasksCompleted = computed(() => {
  return tasks.value.every(task => task.status === '已完成');
});

// 点击任务点时进入学习
const enterLearningPage = (task) => {
  taskToLearn.value = task;  // 设置当前学习的任务点
};

// 播放视频
const playVideo = (url) => {
  window.open(url, '_blank');  // 在新窗口中打开视频
};

// 查看文档
const viewDocument = (url) => {
  window.open(url, '_blank');  // 在新窗口中打开文档
};

// 查看图片
const viewImage = (url) => {
  window.open(url, '_blank');  // 在新窗口中打开图片
};

// 当任务完成时更新状态
const onTaskCompleted = (taskType) => {
  if (taskToLearn.value && taskToLearn.value.status !== '已完成') {
    taskToLearn.value.status = '已完成';  // 设置任务为已完成
  }
};

// 进入考试页面
// 确保 trainingPlanId 有值后再跳转
const enterExamPage = () => {
  if (!trainingPlanId) {
    console.error('Training Plan ID is missing');
    return;
  }

  console.log('Navigating to exam page with Training Plan ID:', trainingPlanId);
  // 跳转到考试页面
  router.push(`/exam/${trainingPlanId}`);
};

// 跳转到主页
const goHome = () => {
  router.push('/home');  // 跳转到主页
};

onMounted(() => {
  getTasks();  // 页面加载时获取任务点列表
});
</script>

<style scoped>
.task-layout {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  background-color: #f7f7f7;
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 20px;
  text-align: left;
}

.task-card {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 16px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  position: relative;
}

.task-card:hover {
  transform: translateY(-5px);  /* 鼠标悬停时卡片上移 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.task-title {
  font-size: 16px;
  font-weight: bold;
  color: #409EFF;
  cursor: pointer;
  margin-bottom: 8px;
}

.task-title:hover {
  text-decoration: underline;
}

.task-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
}

.task-type {
  margin-top: 8px;
}

.task-type-tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 16px;
}

.no-tasks {
  text-align: center;
  color: #999;
  font-size: 16px;
}

.learning-content {
  padding-left: 20px;
  flex: 1;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.task-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.task-actions span {
  cursor: pointer;
}

.task-status-completed {
  color: #67c23a;
  font-size: 14px;
  position: absolute;
  top: 10px;
  left: 10px;
  font-weight: bold;
}

.task-status-incomplete {
  color: #f56c6c;
  font-size: 14px;
  position: absolute;
  top: 10px;
  left: 10px;
  font-weight: bold;
}

.media {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
</style>
